<template>
	<view class="index-content">
		<!-- hader img -->
		<view class="header">
			<uv-swiper bgColor="#043C28" height="1108rpx" :list="listSwiper"></uv-swiper>
			<view class="h-bottom-des">
				<view class="h-title">>>企业追溯码<<</view>
				<view class="h-code">{{code}}</view>
			</view>
		</view>
		<!-- 产品信息 -->
		<listItem :list="goods"></listItem>
		<!-- 基地信息 -->
		<view class="card-swiper">
			<view
			:style="{
				backgroundImage: `url(${base.bg})`,
				backgroundSize: '100% 100%',
				backgroundRepeat: 'no-repeat',
			}"
			class="list-1-title uv-flex" >
				<view class="list-title uv-box-1">{{swiperTitle}}</view>
			
			</view>
			<swiper 
			class="swiper" 
			circular 
			:indicator-dots="true" 
			:autoplay="false" 
			:interval="3000"
			indicator-active-color="#fff"
			indicator-color	="rgba(0,0,0,0.6)"
			:current="current"
			@change="swiperChange"
			:duration="500">
				<swiper-item>
					<listItem :unTitle="true" :list="base"></listItem>
				</swiper-item>
				<swiper-item>
					<listItem :unTitle="true" :list="envs"></listItem>
				</swiper-item>
				<swiper-item>
					<listItem :unTitle="true" :list="seed"></listItem>
				</swiper-item>
			</swiper>
		</view>
		<!-- 竖向信息 -->
		<steps @changLook="changLook" :list="plantLogs"></steps>
		<!-- 采收信息 -->
		<listItem :list="gather"></listItem>
		<!-- 加工信息 -->
		<listItem :list="make"></listItem>
		<!-- 校验信息 -->
		<listItem :list="quality"></listItem>
		<!-- 包装信息 -->
		<listItem :list="pack"></listItem>
		<!-- 存储信息 -->
		<listItem :list="store"></listItem>
		<!-- 底部 -->
		<view class="footer">
			<view class="f-content">
				<view class="g-1">安徽药王邦药业有限公司提供技术支持</view>
			</view>
		</view>
	</view>
	<!-- 弹窗 -->
	<popup :list="listPopup" :title="titlePopup" v-model="showPopup"></popup>
</template>

<script setup>
	import listItem from './components/list'
	import steps from './components/steps'
	import popup from './components/popup';
	import { apiInfo } from '@/api';
import { computed } from 'vue';
	const urlParams = new URLSearchParams(window.location.search);
	const code = urlParams.get("code");
	let current = ref(0)
	const swiperTitle = computed(()=>{
		let titleList = [base.title,envs.title,seed.title]
		return titleList[current.value]
	})
	const swiperChange = (data)=>{
		current.value = data.detail.current
	}
	let goods = reactive({
			title:'产品信息',
			content:[],
			cond:true,
	});
	let base = reactive({
		title:'基地信息',
		content:[],
		cond:true,
	});
	let envs = reactive({
		title:'环境信息',
		content:[
			
		],
		cond:true,
	});
	let seed = reactive({
		title:'种源信息',
		content:[]
	});
	let gather = reactive({
		title:'采收信息',
		bg:'/static/images/t-list-bg-1.png',
		content:[],
		cond:false,
		collapse:true
	});
	let make = reactive({
		title:'加工信息',
		bg:'/static/images/t-list-bg-2.png',
		content:[],
		cond:false,
		collapse:true
	});
	let pack = reactive({
		title:'包装信息',
		bg:'/static/images/t-list-bg-3.png',
		content:[],
		cond:false,
		collapse:true
	});
	let quality = reactive({
		title:'质检信息',
		bg:'/static/images/t-list-bg-1.png',
		content:[],
		cond:false,
		collapse:true
	});
	let store = reactive({
		title:'存储信息',
		bg:'/static/images/t-list-bg-4.png',
		content:[],
		cond:false,
		collapse:true
	});
	let plantLogs = ref([])
	let showPopup = ref(false) //弹窗开关
	const changLook = (data)=>{
		titlePopup.value = data.title;
		listPopup.value =  data.items;
		showPopup.value = true;
	}
	let listSwiper = ref([
		'/static/images/h-banner-img-1.png'
	])
	onLoad(()=>{
		getInfo();
	})
	const getInfo=()=>{
		apiInfo(code).then(res=>{
			goods.content = res.data.goods;
			base.content = res.data.base;
			envs.content = res.data.evns;
			plantLogs.value = res.data.plantLogs;
			seed.content = res.data.seed;
			gather.content = res.data.gather;
			make.content = res.data.make;
			quality.content = res.data.quality;
			pack.content = res.data.pack;
			store.content = res.data.store;
		}).catch(err=>{
			
		})
	}
	let listPopup = ref([])
	let titlePopup = ref("")
</script>
<style>
	page{
		background: #043C28;
	}
</style>
<style lang="scss" scoped>
	.list-1-title{
		width:690rpx;
		margin:0 auto;
		box-sizing: border-box;
		background: linear-gradient( 90deg, #11413E 0%, #106F6A 100%);
		box-shadow: inset 4rpx 4rpx 2rpx 0rpx rgba(255,255,255,0.36);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding:20rpx 30rpx;
		.list-title{
			font-weight: bold;
			font-size: 40rpx;
			background-image: linear-gradient(0deg, #F0BC76 0%, #FBF0DE 100%);;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
			color: transparent; /* 兼容其他浏览器 */
		}
		.rt-title{
			background: linear-gradient( 90deg, #00ABC6 0%, rgba(1,96,206,0) 100%);
			border-radius: 88rpx 88rpx 88rpx 88rpx;
			padding:10rpx;
			color:#fff;
			.title-ico{
				width:48rpx;
				height:48rpx;
				margin-right:10rpx;
			}
		}
	}
	.card-swiper{
		.swiper{
			min-height:930rpx;
		}
	}
	.index-content{
		width: 750rpx;
		margin: 0 auto;
		font-size:28rpx;
		padding-bottom:110rpx;
		position:relative;
		.footer{
			background:#043C28;
			height:110rpx;
			font-size:20rpx;
			position:fixed;
			bottom:0;
			left:0;
			width:100%;
			text-align: center;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			color:rgba(255,255,255,0.5);
			.f-content{
				width: 100%;
			}
			.g-1{
				width:100%;
			}
			.g-2{
				width:100%;
			}
		}
		.header{
			background: #0C6F6A;
			width:100%;
			// height:1294rpx;
			overflow: hidden;
			position:relative;
			.h-bottom-des{
				position:absolute;
				bottom:20rpx;
				left:0;
				width:100%;
				text-align: center;
				.h-title{
					margin-bottom:20rpx;
					color:#fff;
				}
				.h-code{
					width:100%;
					height:64rpx;
					line-height:64rpx;
					text-align: center;
					background: url('/static/images/h-bottom-bg.png') no-repeat;
					background-size: 100% 100%;
					color:#005957;
					font-weight: 600;
					font-size: 30rpx;
				}
			}
		}
	}
</style>
